import { dom } from '../tool';
import { ColorSelect, Select, SizeSet, Input, BorderSet, Button } from '../components';
import fontFamily from './fontFamily';
import TextAlign from './textAlign';

interface ToolbarType {
    new(): ToolbarType;
    onChange: (style: object) => void;
    setValues: (style: any) => void;
    render: (target?: HTMLElement) => HTMLElement;
    delButDisabled: (arg:boolean)=>void;
    onDelClick: ()=>void;
    save: ()=>void;
    preview: ()=>void;
}

function Toolbar(this: ToolbarType) {
    const handle: any = {

    }
    const colorChange = (value: any) => {
        if (this.onChange) {
            this.onChange({ color: value });
        }
    }
    const backgroundColorChange = (value: any) => {
        if (this.onChange) {
            this.onChange({ backgroundColor: value });
        }
    }
    const fontFamilyChange = (value: any) => {
        if (this.onChange) {
            this.onChange({ fontFamily: value });
        }
    }
    const fontSizeChange = (value: any) => {
        if (this.onChange) {
            this.onChange({ fontSize: value ? value + "px" : "12px" });
        }
    }
    const fontWeightChange = (value: any) => {
        if (this.onChange) {
            this.onChange({ fontWeight: value });
        }
    }
    const textAlignChange = (value: any) => {
        if (this.onChange) {
            this.onChange({ textAlign: value });
        }
    }
    const borderChange = (value: any) => {
        if (this.onChange) {
            this.onChange(value);
        }
    }
    const paddingChange = (value: any) => {
        if (this.onChange) {
            this.onChange({ padding: value });
        }
    }
    const marginChange = (value: any) => {
        if (this.onChange) {
            this.onChange({ margin: value });
        }
    }
    const zIndexChange = (value: any) => {
        if (this.onChange) {
            this.onChange({ zIndex: value });
        }
    }

    const widthChange = (value: any) => {
        if (this.onChange) {
            this.onChange({ width: value ? value + "px" : 0 });
        }
    }
    const heightChange = (value: any) => {
        if (this.onChange) {
            this.onChange({ minHeight: value ? value + "px" : 0 });
        }
    }

    const delClick = (event: MouseEvent) => {
        this.onDelClick();
    }

    const saveClick = (event: MouseEvent)=>{
        if(this.save) this.save();
    }

    const preview = (event: MouseEvent)=>{
        if(this.preview) this.preview();
    }

    this.delButDisabled = (arg)=>{
        handle.delBut.setDisabled(arg);
    }


    this.setValues = (values = {}) => {
        let textAlignV = values.textAlign;
        if (textAlignV === 'start') {
            textAlignV = 'left';
        } else if (textAlignV === 'end') {
            textAlignV = 'right';
        }
        let fontFamilyV = values.fontFamily;
        if (fontFamilyV[0] == '"') {
            fontFamilyV = fontFamilyV.substring(1, fontFamilyV.length - 1);
        }
        handle.color.setValue(values.color);
        handle.backgroundColor.setValue(values.backgroundColor);
        handle.fontFamily.setValue(fontFamilyV);
        handle.textAlign.setValue(textAlignV);
        handle.fontSize.setValue(parseInt(values.fontSize));
        handle.fontWeight.setValue(values.fontWeight);
        handle.padding.setValue(values.padding);
        handle.zIndex.setValue(values.zIndex);
        handle.width.setValue(parseInt(values.width));
        handle.height.setValue(parseInt(values.height));
        let borderV = null;
        if (values.border != '' && values.border.indexOf("none") < 0 && values.border.indexOf("0px") < 0) {
            borderV = "border: " + values.border;
        } else if (values.borderLeft != '' && values.borderLeft.indexOf("none") < 0 && values.borderLeft.indexOf("0px") < 0) {
            borderV = "borderLeft: " + values.borderLeft;
        } else if (values.borderTop != '' && values.borderTop.indexOf("none") < 0 && values.borderTop.indexOf("0px") < 0) {
            borderV = "borderTop: " + values.borderTop;
        } else if (values.borderRight != '' && values.borderRight.indexOf("none") < 0 && values.borderRight.indexOf("0px") < 0) {
            borderV = "borderRight: " + values.borderRight;
        } else if (values.borderBottom != '' && values.borderBottom.indexOf("none") < 0 && values.borderBottom.indexOf("0px") < 0) {
            borderV = "borderBottom: " + values.borderBottom;
        }
        handle.border.setValue(borderV);
    }

    this.render = (target) => {
        const container = dom('div', { target, style: 'min-width: 1250px;' })
        const fontSetting = dom('div', { target: container, style: 'display: inline-block' });
        const sizeSetting = dom('div', { target: container, style: 'display: inline-block' });
        const boxSetting = dom('div', { target: container });
        handle.color = new ColorSelect({ target: fontSetting, children: 'A', onChange: colorChange, className: 'gkh-form-item', style: "font-weight: 600;" });
        handle.backgroundColor = new ColorSelect({
            children: ' ',
            showType: 'backgroundColor',
            onChange: backgroundColorChange,
            className: 'gkh-form-item',
            target: fontSetting
        });
        handle.fontFamily = new Select({ target: fontSetting, data: fontFamily, label: '字体', onChange: fontFamilyChange });

        handle.textAlign = new TextAlign({ target: fontSetting, value: 'left', onChange: textAlignChange });
        handle.fontSize = new SizeSet({ target: fontSetting, value: 14, label: '大小', onChange: fontSizeChange, min: 8, max: 100 });

        handle.fontWeight = new SizeSet({ target: fontSetting, value: 400, label: '粗细', onChange: fontWeightChange, min: 200, max: 1000 });

        handle.width = new SizeSet({ target: sizeSetting, value: 0, label: '宽度', onChange: widthChange, min: 0, max: 2000 });
        handle.height = new SizeSet({ target: sizeSetting, value: 0, label: '高度', onChange: heightChange, min: 0, max: 1000 });
        handle.zIndex = new Input({ target: sizeSetting, label: '图层', onChange: zIndexChange, inputStyle: "width: 60px;" });

        handle.border = new BorderSet({ label: '边框', onChange: borderChange, target: boxSetting, className: 'gkh-form-item' });

        handle.padding = new Input({ target: boxSetting, label: '内边距', onChange: paddingChange });

        handle.margin = new Input({ target: boxSetting, label: '外边距', onChange: marginChange });

        handle.delBut = new Button({ target: boxSetting, child: "删除单元", onClick: delClick, disabled: true, className: 'gkh-form-item' })
        handle.saveBut = new Button({ target: boxSetting, child: "保存", onClick: saveClick, className: 'gkh-form-item' })
        handle.preview = new Button({ target: boxSetting, child: "预览", onClick: preview, className: 'gkh-form-item' })
        return container;
    }
    return this;
}

export default Toolbar as unknown as ToolbarType;